<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        需求:将图片上传到服务器
    -->
    <input type="file" id="file1"> <br />
    <button>上传图片</button><br />
    <!-- 
        显示上传的图片
        src：填写服务器的地址
    -->
    <img src="" alt="" height="500px" width="600px">
    <script>
        /* 
            通过Ajax上传图片
        */
        const request = new XMLHttpRequest();
        const fileObj = document.querySelector("#file1");
        const btnObj = document.querySelector("button");
        const imgObj = document.querySelector("img");
        // 1.绑定事件
        btnObj.addEventListener("click", function () {
            // 2.判断用户是否添加了文件
            if (fileOjb.files.length <= 0) {
                return alert("请选择文件");
            }
            // 3.将用户添加的文件绑定到FormData对象
            const formData = new FormData();
            formData.append('files', fileObj.files[0]);

            // 4. 发送ajax请求，需要通过post请求提交
            request.open("POST", "http://120.78.190.136:8080/spboot/upload");
            request.send(formData);

            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    // 获取服务端响应回来的内容。
                    // {"msg":"文件上传成功","fileName":"dcbcd881-53af-4c09-a309-b81307879518a.png","code":200}
                    // 服务端在存储文件的时候，因为考虑到文件名想用会覆盖，所以在服务端生成一个随机字符串来代替文件名
                    console.log(request.responseText);
                    // 5. 接下来：把上传到服务端图片，显示在当前页面。
                    // 6. 需要判断服务端响应回来的消息是否是 文件上传成功 如果是的话才显示
                    const responseValue = JSON.parse(request.responseText);
                    if (responseValue.msg == "文件上传成功") {
                        imgObj.src = "http://120.78.190.136:8080/spboot/uploads/" + responseValue.fileName;
                    }
                }
            }
        })
    </script>
</body>

</html>